<template>
  <scroll-view scroll-y="true" enable-flex="false" class="box">
		
    <button class="btn" @click="goToList">跳转列表页111</button>
    <button class="btn" @click="goToPageA">跳转到子包</button>
    <button class="btn" @click="openPopup">打开popup</button>
    <button class="btn" @click="goToList">跳转列表页</button>
    <button class="btn" @click="goToList">跳转列表页</button>
    <!--
    <uni-popup ref="popup" type="bottom">
      <view class="popup-box">底部弹出 Popup</view>
    </uni-popup>
    -->
    <u-icon name="arrow-right-double" size="30" color="#909399"></u-icon>    
    <u-button type="primary" text="确定"></u-button>

  </scroll-view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '我是一个首页'
			}
		},
		options:{virtualHost: true},
    created(){
      console.log('首页组件-->created');
    },
		mounted(){
			console.log('首页组件-->mounted');
		},
		destroyed(){
			console.log('首页组件-->destroyed');
		},
    methods: {
			goToList(){
				console.log(111);
				uni.navigateTo({url:'/pages/list/list'});  
			},
      goToPageA(){
        uni.navigateTo({url:'/pagesA/template/template'});  
      },
      openPopup(){
        this.$refs.popup.open('bottom')
      }
    }
	}
</script>

<style>
.header{ background: red; flex:1; display:flex; align-items:center;}
.box{ background: #ccc; flex:1; min-height: 100rpx; padding-top:20rpx;}
.btn{ width:300rpx; margin-bottom:100rpx;}
.popup-box{ background: #fff; height: 500rpx;}
.uximg{ width: 500rpx; height: 500rpx;}
</style>
